import React, {Component} from 'react';
import {Button, Card, Divider, Icon, Row, Tooltip} from 'antd';
import {connect} from 'react-redux';
import * as actions from '../../action/index';
import constant from '../../constant/index';
import {FormattedMessage} from "react-intl";
import {withRouter} from "react-router-dom";

class SocialBinding extends Component {
    handleEditPasswordClick = () => {
        this.props.modifyEditPasswordStatus(constant.PASSWORD_EDIT_STATUS.EDIT);
    };

    isBinding = socialInfo => socialInfo.length > 0

    renderPasswordInfo(socialInfo) {
        const {user} = this.props
        return <div>
            <Row>
                <form id="bindingForm" method="post" action={`../api/auth/bindQRCode/${user.userName}`}>
                    <Tooltip title={<FormattedMessage id='绑定后直接使用微信扫码登录'/>}>
                        <Icon type="wechat" style={{color: '#42c02e', fontSize: 25}}/>
                    </Tooltip>
                    <Divider type='vertical'/>
                    {
                        this.isBinding(socialInfo) ?
                            <span>
                        <FormattedMessage id='已绑定'/>
                        <Divider type='vertical'/>
                        <a target='_self' onClick={() => this.props.unBinding(user.userName)}><FormattedMessage
                            id='解除绑定'/></a>
                    </span>
                            :
                            <Button type='primary' htmlType='submit'><FormattedMessage id='绑定微信'/></Button>
                    }
                </form>
            </Row>
        </div>
    };

    render = () => {
        const {socialInfo} = this.props
        return (
            <Card noHovering={true} title={<FormattedMessage id='第三方绑定'/>}>
                {this.renderPasswordInfo(socialInfo)}
            </Card>
        )
    }
}

const mapStateToProps = ({socialInfo, user}) => ({
    socialInfo,
    user
});

const mapDispatchToProps = dispatch => ({

    unBinding: (username) => dispatch(actions.unBinding(username)),
    modifyEditPasswordStatus: status => dispatch(actions.modifyEditPasswordStatus(status))
});

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(SocialBinding))



